<template>
    <div id="preview">
      <div id="handleCancelBody">
         <div id="left">
            <div class="content">
               <p class="title">
                  <span>基础信息</span>
               </p>
               <p class="entry">
                  <span>表名称:</span>
                  <span>{{getDataBeseBasic.tableAlias || "-"}}</span>
               </p>
               <p class="entry copy-content">
                  <span>表单英文名称:</span>
                  <span  id="databaseName">{{getDataBeseBasic.tableName || "-"}}</span>
                  <i class="el-icon-document-copy copy-icon" ref="copyContent"
                     @click="copy('clipboard','copyContent','databaseName')">
                  </i>
               </p>
               <p class="entry">
                  <span>所属分类:</span>
                  <span>{{getDataBeseBasic.dirPath || "-"}}</span>
               </p>
               <p class="entry">
                  <span>表单描述:</span>
                  <span>{{getDataBeseBasic.comment || "-"}}</span>
               </p>
               <p class="entry">
                  <span>表类型:</span>
                  <span>{{schemeStatusOption[getDataBeseBasic.schemeStatus] || "-"}}</span>
               </p>
                <p class="entry">
                  <span>表更新周期:</span>
                  <span>{{schemeCycleOption[getDataBeseBasic.schemeCycle] || "-"}}</span>
               </p>
            </div>
            <div class="content">
               <p class="title">
                  <span>统计信息</span>
               </p>
               <p class="entry">
                  <span>数据最近更新:</span>
                  <span>{{getDataBeseBasic.updateTime || '-'}}</span>
               </p>
               <p class="entry">
                  <span>表单创建时间:</span>
                  <span>{{getDataBeseBasic.createTime || '-'}}</span>
               </p>
               <p class="entry">
                  <span>数据行数:</span>
                  <span>{{getDataBeseBasic.totalRows + "行" || "-"}}</span>
               </p>
               <p class="entry">
                  <span>字段数量:</span>
                  <span>{{getDataBeseBasic.totalFields || '-'}}</span>
               </p>
               <p class="entry">
                  <span>文件大小:</span>
                  <span>{{ getDataBeseBasic.storeSize? (getDataBeseBasic.storeSize /1024 /1024).toFixed(2) + "Mb": "-"}}</span>
               </p>
            </div>
            <div class="content">
               <p class="title">
                  <span>权限信息</span>
               </p>
               <p class="entry">
                  <span>安全等级:</span>
                  <span>{{ getDataBeseBasic.safeLevel}}</span>
               </p>
               <p class="entry">
                  <span>管理权限:</span>
                  <span>{{getDataBeseBasic.accessType?checkaccessType(getDataBeseBasic.accessType):'-'}}</span>
               </p>
               <p class="entry">
                  <span>负责组:</span>
                  <span>{{getDataBeseBasic.groupName || "-"}}</span>
               </p>
               <p class="entry">
                  <span>负责人:</span>
                  <span>{{getDataBeseBasic.leaderName || "-"}}</span>
               </p>
            </div>
         </div>
         <div id="right">
            <a-tabs :default-active-key="tabPaneKey" @change="tabPaneHnadle">
               <a-tab-pane
                  v-for="(item,index) in tabPane"
                  :key="item.id"
                  :tab="item.value">
               </a-tab-pane>
            </a-tabs>
            <dataView :tableId="tableId" :accessType="accessType" v-if="tabPaneKey==1"/>
            <metaData :tabId="tableId" :accessType="accessType" v-else/>
               <!-- 表格
            <a-table
               :columns="visibleColumns"
               :data-source="visibleData"
               :pagination="false"
               bordered
               :rowKey="(record,index)=>{return index}"
               size="small"
               :scroll="{y: 440 }"
            >
               <template
                  slot="serials"
                  slot-scope="text, record, index"
               > 
                  <a>{{ index + 1 }}</a>
               </template>
               <template slot="action" slot-scope="text, record, index">
                  <a-button type="link" @click="">保存</a-button>
                  <a-button type="link">取消</a-button>
                  <a-button type="link">编辑</a-button>
                  <a-button type="link">删除</a-button>
               </template>
            </a-table>
            <div class="visibleFooter">
               <a-config-provider :locale="zh_CN">
                  <a-pagination
                     show-size-changer
                     :default-current="3"
                     :total="500"
                     show-quick-jumper
                     @change="onVisibleChange"
                     @showSizeChange="onVisibleShowSizeChange"
                     :show-total="total => `总数据 ${total} 条`"
                  />
               </a-config-provider>
            </div>-->
         </div>
      </div>
   </div>
</template>
<script>
import dataView from "./dataView";
import metaData from "./metaData";
import {getDataBeseBasic} from '@/api/dataManagement/system/info'
import { typeList, schemeStatusOption,schemeCycleOption} from '@/assets/js/fieldTypeList'
import Clipboard from 'clipboard'
export default {
   props:["tableId","accessType"],
   data() {
      return {
         tabPane: [
         //导航栏列表
         {
            id: 1,
            value: "数据预览",
         },
         {
            id: 2,
            value: "元数据信息",
         },
         ],
         tabPaneKey: 1, //导航栏
          // 字段类型
         typeList,
         schemeStatusOption,
         schemeCycleOption,
         clipboard: '',
         visibleColumns: [
         {
            title: "自增id",
            dataIndex: "serial",
            key: "serial",
            align: "center",
            children: [
               {
               title: "id",
               dataIndex: "serials",
               key: "serials",
               align: "center",
               scopedSlots: { customRender: "serials" },
               },
            ],
         },
         {
            title: "特殊属性",
            dataIndex: "special_properties",
            key: "special_properties",
            align: "center",
            children: [
               {
               title: "special_properties",
               dataIndex: "special_propertiess",
               key: "special_propertiess",
               align: "center",
               },
            ],
         },
         {
            title: "特殊属性类型",
            dataIndex: "special_properties_type",
            key: "special_properties_type",
            align: "center",
            children: [
               {
               title: "special_properties_type",
               dataIndex: "special_properties_types",
               key: "special_properties_types",
               align: "center",
               },
            ],
         },
         {
            title: "数据来源",
            dataIndex: "data_source",
            key: "data_source",
            align: "center",
            children: [
               {
               title: "data_source",
               dataIndex: "data_sources",
               key: "data_sources",
               align: "center",
               },
            ],
         },
         {
            title: "创建时间",
            dataIndex: "create_time",
            key: "create_time",
            align: "center",
            children: [
               {
               title: "create_time",
               dataIndex: "create_times",
               key: "create_times",
               align: "center",
               },
            ],
         },
         {
            title: "操作",
            dataIndex: "action",
            key: "action",
            align: "center",
            fixed: "right",
            width: 200,
            scopedSlots: { customRender: "action" },
         },
         ], //弹窗表格表头
         visibleData: [{
            special_propertiess: 11,
            special_properties_types: 11,
            data_sources: 11,
            create_times: 11,
         },], //弹窗表格数据
         getDataBeseBasic:''
      };
   },
   components:{metaData,dataView},
   created(){
      this.getbeseBasic();
   },
   mounted(){
      this.clipboard = new Clipboard(this.$refs.copyContent, {
         target: function() {
            return document.getElementById('databaseName')
         }
      })
   },
   methods: {
      //弹窗分页跳转到某一页
      onVisibleChange(item) {
         console.log(item);
      },
       //  获取表基础信息
      getbeseBasic() {
         getDataBeseBasic({ tableId: this.tableId }).then(res => {
            this.getDataBeseBasic = res.data
         // this.getDataBeseBasic = {...res.data, schemeStatus:"动态", schemeCycle:'实时更新'};
         console.log("this.getDataBeseBasic:",this.getDataBeseBasic)
         })
      },
       // 基础信息 表名复制
      copy(val, _ref, id) {
         var that = this
         that[val].on('success', e => {
         // 释放内存
         // this.$message.success('复制成功');
            that.$message({
               message: '复制成功',
               type: 'success'
            })
            that[val].destroy()
         })

         that[val].on('error', () => {
            alert('不支持此浏览器')
            console.log('clipboard')
            // 释放内存
            that[val].destroy()
         })

         that[val] = new Clipboard(that.$refs[_ref], {
            target: function() {
               return document.getElementById(id)
            }
         })
      },
      //弹窗分页改变条数
      onVisibleShowSizeChange(current, pageSize) {
         console.log(current, pageSize);
      },
      tabPaneHnadle(item){
         this.tabPaneKey =  item
      },
      //
      checkaccessType(type) {
         var val = ''
         this.typeList.forEach(item => {
            if (item.value == type) {
               val = item.label
            }
         })
         return val
      },
      //
   },
};
</script>

<style lang="scss" scoped>
.copy-content{
   position: relative;
   #databaseName{
      width:55%!important;
   }
   .copy-icon {
      position: absolute;
      cursor: pointer;
      margin-left: 10px;
      right:0px;
   }
}
</style>

